<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>tree-table</title>
    <link rel="stylesheet" href="../res/layui/css/layui.css">
    <script src="../res/layui/layui.js"></script>
    <script src="../res/js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script>
        $(function(){
            $("#seachTable").on("click",function(){
                //执行重载
                //带条件查询
                table2.reload({
                    url:'../AtsBaseSport/findName',
                    where: {
                        newsTitle: $("#newsTitle").val()
                    },
                    page: { curr: 1 }
                });
            })
        });
    </script>
</head>
<body>
<div class="demoTable">
    搜索：
    <div class="layui-inline">
        <input class="layui-input" name="newsTitle" placeholder="查询名称" id="newsTitle" autocomplete="off">
    </div>
    <input type="button" id="seachTable" class="layui-btn layui-btn-normal" value="搜索" />
</div>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button type="button" class="layui-btn layui-btn-sm" lay-event="zj"><i class="layui-icon"></i></button>
    </div>
</script>
<table id="demo" lay-filter="test"></table>


<script>
    var table2 = null ;
    var table = null;
    layui.use('table', function(){
        table = layui.table;

        //第一个实例
        table2 =  table.render({
            elem: '#demo'
            ,id:'testReload'
            ,height: 550
            ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            ,url: '../AtsBaseSport/selectAll' //数据接口
            ,page: true //开启分页
            ,cols: [[ //表头
                {field: 'sportId', title: '上級模型', width:120, sort: true}
                ,{field: 'sportName', title: '项目名称', width:150}
                ,{field: 'sportExp', title: '项目说明', width: 150}
                ,{field: 'remark', title: '其他说明', width: 180, sort: true}
                ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
            ]]
        });

        table.on('tool(test)', function(obj){
            var data = obj.data;//行数据
            //console.log(obj)
            if(obj.event === 'del'){
                layer.confirm('您真的要删除吗?', function(index){
                    obj.del();
                    layer.close(index);
                    //使用ajax进入后台删除数据库中的数据
                    var url = "../AtsBaseSport/deleteSp";
                    var data$ = {id:data.sportId} ;
                    $.post(url,data$,function(obj){
                        //提示
                        layer.msg(obj.msg);
                    },"json");
                });
            } else if(obj.event === 'edit'){

                var data = obj.data;//行数据

                //iframe层
                layer.open({
                    type: 2,
                    title: '数据字典修改页面',
                    shadeClose: true,
                    shade: 0.8,
                    area: ['40%', '40%'],
                    content: 'AtsBaseSportUpdate.html?id='+data.sportId, //iframe的url
                    end : function() {
                        table2.reload();
                    }
                });
            }
        });


//头工具栏事件
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'zj':
                    //iframe层
                    layer.open({
                        type: 2,
                        title: '数据字典新增页面',
                        shadeClose: true,
                        shade: 0.8,
                        area: ['40%', '40%'],
                        content: 'AtsBaseSportUpdate.html', //iframe的url
                        end : function() {
                            table2.reload();
                        }
                    });
                    break;
            }
        });
    });
</script>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

</body>
</html>